<template>
  <div class="infinite-list-wrapper" >
    <h1>疫苗列表</h1>
    <ul
        class="list"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="disabled">
      <li v-for="i in vaccineListForth" class="list-item" @click="appointment(i)">
        {{i}}
      </li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
export default {
  name: "UserVaccineList",
  data () {
    return {
      count: 4,
      loading: false,
      vaccineList: null,
      vaccineListSize: 0,
      vaccineListForth: [],
      vaccineListUp: null,
      i:7,
      userFrom:{
        gender:'',
        name:'',
        phone:'',
        telephone:'',
        province:'',
        city:'',
        region:'',
        vname:'',
        vmsg:null
      }
    }
  },
  computed: {
    noMore () {
      return this.i >= this.vaccineListSize
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    load () {
      this.loading = true
      setTimeout(() => {
        if (this.vaccineList[this.i] !== undefined){
          this.vaccineListForth.push(this.vaccineList[this.i])
        }
        this.i += 1
        if (this.vaccineList[this.i] !== undefined){
          this.vaccineListForth.push(this.vaccineList[this.i])
        }
        this.i += 1
        if (this.vaccineList[this.i] !== undefined){
          this.vaccineListForth.push(this.vaccineList[this.i])
        }
        this.i += 1
        if (this.vaccineList[this.i] !== undefined){
          this.vaccineListForth.push(this.vaccineList[this.i])
        }
        this.i += 1
        this.loading = false
      }, 2000)
    },
    appointment(name){
      this.userFrom.vname = name
      this.$prompt('您要预约当前疫苗吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: name
      }).then(({ value }) => {
        axios({
          url:'http://localhost:88/api/user/users/order',
          method:'post',
          data:{
            gender:this.userFrom.gender,
            name:this.userFrom.name,
            phone:this.userFrom.phone,
            telephone:this.userFrom.telephone,
            province:this.userFrom.province,
            city:this.userFrom.city,
            region:this.userFrom.region,
            vname:this.userFrom.vname,
            vmsg:this.userFrom.vmsg
          }
        }).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '您的选择是: ' + name
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
  mounted() {
    let userMsg = JSON.parse(localStorage.getItem("userManager"))
    this.userFrom.gender=userMsg.gender
    this.userFrom.name=userMsg.name
    this.userFrom.phone=userMsg.phone
    this.userFrom.telephone=userMsg.telephone
    this.userFrom.province=userMsg.province
    this.userFrom.city=userMsg.city
    this.userFrom.region=userMsg.region
    axios({
      url:'http://localhost:88/api/user/users/userGetVaccine',
      method:'get'
    }).then(res => {
      console.log(res)
      this.vaccineList = res.data.data
      this.vaccineListSize = res.data.data.length
      this.vaccineListForth.push(res.data.data[0])
      this.vaccineListForth.push(res.data.data[1])
      this.vaccineListForth.push(res.data.data[2])
      this.vaccineListForth.push(res.data.data[3])
      this.vaccineListForth.push(res.data.data[5])
      this.vaccineListForth.push(res.data.data[6])
    })
  }
}
</script>

<style scoped>
li{
  list-style-type: none;
  height: 60px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  margin-top: 20px;
  margin-right: 25px;
}
ul{
  width: 100%;
  position: relative;
  right: 25px;
}
</style>
